<template>
	<div class="addTo">
		<p>添加照片至</p>
		<i class="iconfont iconquxiao1" @click="addToDown"></i>
		<ul>
			<li v-for="item in photosort" @click="addToAblum(item.ablumId)">
				<img :src="item.ablumCoverPath != null ? $store.state.baseHttp+item.ablumCoverPath : 'img/nullImg.27aff2e6.png' " alt="">
			<span>{{item.ablumName}}</span></li>
		</ul>
	</div>
</template>

<script>
	import bus from '@/bus/bus.js'
	export default{
		data(){
			return{
				photosort:[]
			}
		},
		created() {
			this.getAlbum();
		},
		methods:{
			getAlbum() {
				this.$http.get('/api/ablum').then(res => {
					let Ddata = this.$ablumClass.DgetAllAblum(res.data)
					this.photosort = Ddata
				})
			},
			// 关闭相册
			addToDown(){
				this.$emit("closeWindows")
			},
			//添加到相册
			addToAblum(ablumId){
				bus.$emit("loading")
				bus.$emit('uploadClick',ablumId)
				this.addToDown()
			},
		}
	}
</script>

<style scoped="scoped">
	.addTo{
		position: fixed;
		left: 50%;
		top: 50%;
		padding: 20px;
		transform: translate(-50%,-50%);
		background-color: #ebebeb;
		border-radius: 10px;
		z-index: 999;
	}
	.addTo ul {
		width: 400px;
		height: 500px;
		overflow: auto;
		padding-top: 40px;
	}
	
	.addTo img {
		width: 50px;
		height: 50px;
		border: 2px solid #959c9d;
		border-radius: 5px;
		vertical-align: middle;
		line-height: 70px;
	}
	
	.addTo li {
		height: 70px;
		width: 100%;
		margin-bottom: 10px;
		background-color: #e1e1e1;
		padding-left: 20px;
		box-sizing: border-box;
		box-shadow: -2px 9px 7px -5px #cacaca;
		border-radius: 10px;
		cursor: pointer;
	}
	
	.addTo span {
		vertical-align: middle;
		margin-left: 22%;
		line-height: 70px;
		color: #5f5f5f;
		font-size: 18px;
	}
	.iconquxiao1{
		position: absolute;
		top: 10px;
		right: 10px;
		cursor: pointer;
	}
	.iconquxiao1:hover{
		color: #7e8bff;
	}
</style>
